<template>
	<div class="video" :style="{ height: voidHeight }">
		<video :ref="videoElement" muted controls autoplay></video>
		<div class="img_error" v-if="imgError">
			<!-- <img src="../assets/image/wushipin_lan_da.png" alt="" /> -->
			<p>视频播放错误，请联系管理员！</p>
		</div>
	</div>
</template>

<script>
import flvjs from "flv.js/dist/flv.min.js"
// import wushipin_lan_da from '../assets/image/wushipin_lan_da.png';
export default {
	name: "assemblyFlv",
	props: ["url", "height", "destroy", "videoElement"], // 视频流路径，播放器高度，是否销毁播放器
	data() {
		return {
			flvPlayer: "",
			imgError: false,
			voidHeight: "",
			lastDecodedFrame: 0,
		}
	},
	mounted() {
		// 判断是否传入高度，如果没有，高度100%
		this.height ? (this.voidHeight = this.height) : (this.voidHeight = "100%")
		// 页面加载完成后，初始化
		this.$nextTick(() => {
			this.init()
		})
	},
	methods: {
		// 初始化
		init() {
			if (flvjs.isSupported()) {
				const _this = this
				_this.flvPlayer = flvjs.createPlayer(
					{
						type: "flv",
						url: this.url,
						isLive: true,
						hasAudio: false,
						fluid: true,
						stashInitialSize: 128, // 减少首桢显示等待时长
					},
					{
						enableWorker: false, //不启用分离线程
						enableStashBuffer: false, //关闭IO隐藏缓冲区
						reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
						autoCleanupSourceBuffer: true, //自动清除缓存
						fixAudioTimestampGap: false, // 音视频同步
					}
				)
				let videoElement = _this.$refs[_this.videoElement]
				_this.flvPlayer.attachMediaElement(videoElement)
				_this.flvPlayer.load()
				_this.flvPlayer.play()

				// 加载完成
				_this.flvPlayer.on(flvjs.Events.LOADING_COMPLETE, () => {
					_this.imgError = false
				})

				// 加载失败
				_this.flvPlayer.on(
					flvjs.Events.ERROR,
					() => {
						console.log(333333333333333)
						if (_this.flvPlayer) {
							_this.reloadVideo(_this.flvPlayer)
						}
						// this.imgError = true
					},
					error => {
						console.log(error)
					}
				)
				// // 获取时间跟不上帧数的问题
				// setInterval(() => {
				// 	if (videoElement.buffered.length) {
				// 		let end = videoElement.buffered.end(0) //获取当前buffered值
				// 		let diff = end - videoElement.currentTime //获取buffered与currentTime的差值
				// 		if (diff >= 0.5) {
				// 			//如果差值大于等于0.5 手动跳帧 这里可根据自身需求来定
				// 			videoElement.currentTime = videoElement.buffered.end(0) //手动跳帧
				// 		}
				// 	}
				// }, 2000) //2000毫秒执行一次

				// 这里做监听
				_this.flvPlayer.on("statistics_info", function (res) {
					if (_this.lastDecodedFrame == 0) {
						_this.lastDecodedFrame = res.decodedFrames
						return
					}
					if (_this.lastDecodedFrame != res.decodedFrames) {
						_this.lastDecodedFrame = res.decodedFrames
					} else {
						_this.lastDecodedFrame = 0
						if (_this.flvPlayer) {
							//这块调用底下的两个方法去重新调用渲染组件
							_this.reloadVideo(_this.flvPlayer)
						}
					}
				})
			} else {
				_this.imgError = true
			}
		},
		destoryVideo(flvPlayer) {
			// flvPlayer.pause()
			flvPlayer.unload()
			flvPlayer.detachMediaElement()
			flvPlayer.destroy()
			flvPlayer = null
		},
		reloadVideo(flvPlayer) {
			this.destoryVideo(flvPlayer)
			this.$nextTick(() => {
				this.init()
			})
		},
	},
	watch: {},
}
</script>

<style scoped>
.video {
	position: relative;
	height: 100%;
}
video {
	width: 100%;
	height: 100%;
	object-fit: fill;
}
.img_error {
	position: absolute;
	top: 30%;
	left: 50%;
	margin-left: -120px;
	text-align: center;
}
.img_error > img {
	margin-bottom: 1em;
}
.img_error > p {
	color: #00fdff;
	font-weight: bold;
	font-size: 1.2em;
}
</style>
